<template>
  <div class="approvals-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        审批
        <!-- .native 修饰符: 给子组件的根标签绑定事件 -->
        <!-- 技巧: 如果需要给组件绑定事件, 绑了没生效就加一个 .native -->
        <son @click.native="hClick" />
        <el-button @click="hBtn">点我</el-button>

        <el-divider content-position="right">这是一个华丽丽的的分割线</el-divider>

        <h1>addRoutes 动态路由学习</h1>
        <p>需求: 希望用户点击按钮后才可以访问 /abc 页面</p>
        <el-button @click="hAdd">快点我!</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import son from './son'
import Layout from '@/layout'
export default {
  components: {
    son
  },
  methods: {
    hClick() {
      console.log('xiuson 被点了')
    },
    hBtn() {
      console.log('btn 被点了')
    },
    hAdd() {
      // 往现存的路由表中再添加一个路由规则
      // router.addRoutes()
      // 参数: 数组, 数组中可以存放多个路由规则对象
      this.$router.addRoutes([
        {
          path: '/abc',
          component: Layout,
          children: [{
            path: '',
            name: 'abc',
            component: () => import('@/views/approvals/abc.vue'),
            meta: { title: 'abc', icon: 'tree-table' }
          }]
        }
      ])
    }
  }
}
</script>
